<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WMS管理系统</title>
    
    <!-- Dify智能体配置 -->
    <script>
      window.difyChatbotConfig = {
        token: '8kZ6czVlqIC5fIOQ',
        systemVariables: {
          // user_id: 'YOU CAN DEFINE USER ID HERE',
          // conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
        },
        userVariables: {
          // avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
          // name: 'YOU CAN DEFINE USER NAME HERE',
        },
      }
      
      // 确保Dify智能体默认只显示小图标
      window.addEventListener('DOMContentLoaded', function() {
        // 等待Dify智能体加载完成后，确保聊天窗口默认隐藏
        const checkDifyLoaded = setInterval(function() {
          const chatWindow = document.getElementById('dify-chatbot-bubble-window')
          const chatButton = document.getElementById('dify-chatbot-bubble-button')
          
          if (chatWindow && chatButton) {
            clearInterval(checkDifyLoaded)
            
            // 确保聊天窗口默认隐藏
            chatWindow.style.display = 'none'
            chatWindow.style.opacity = '0'
            chatWindow.style.visibility = 'hidden'
            
            // 确保小图标可见
            chatButton.style.display = 'block'
            chatButton.style.opacity = '1'
            chatButton.style.visibility = 'visible'
            
            // 添加关闭按钮到聊天窗口
            addCloseButton(chatWindow)
            
            // 监听小图标点击事件
            chatButton.addEventListener('click', function() {
              chatWindow.style.display = 'block'
              chatWindow.style.opacity = '1'
              chatWindow.style.visibility = 'visible'
              
              // 确保关闭按钮在窗口打开后可见
              setTimeout(() => {
                addCloseButton(chatWindow)
              }, 100)
            })
            
            // 监听聊天窗口关闭事件
            const observer = new MutationObserver(function(mutations) {
              mutations.forEach(function(mutation) {
                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                  if (chatWindow.style.display === 'none') {
                    chatWindow.style.opacity = '0'
                    chatWindow.style.visibility = 'hidden'
                  }
                }
              })
            })
            
            observer.observe(chatWindow, {
              attributes: true,
              attributeFilter: ['style']
            })
          }
        }, 100)
        
        // 添加关闭按钮的函数
        function addCloseButton(chatWindow) {
          // 检查是否已经有关闭按钮
          if (chatWindow.querySelector('.dify-close-btn')) {
            return
          }
          
          // 创建关闭按钮
          const closeBtn = document.createElement('div')
          closeBtn.className = 'dify-close-btn'
          closeBtn.innerHTML = '×'
          closeBtn.title = '关闭聊天窗口'
          
          // 设置关闭按钮样式
          closeBtn.style.cssText = `
            position: absolute;
            top: 10px;
            right: 10px;
            width: 24px;
            height: 24px;
            background: #ff4757;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            z-index: 10000;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            border: none;
            outline: none;
            user-select: none;
          `
          
          // 添加悬停效果
          closeBtn.addEventListener('mouseenter', function() {
            this.style.background = '#ff3742'
            this.style.transform = 'scale(1.1)'
          })
          
          closeBtn.addEventListener('mouseleave', function() {
            this.style.background = '#ff4757'
            this.style.transform = 'scale(1)'
          })
          
          // 添加点击关闭事件
          closeBtn.addEventListener('click', function(e) {
            e.preventDefault()
            e.stopPropagation()
            chatWindow.style.display = 'none'
            chatWindow.style.opacity = '0'
            chatWindow.style.visibility = 'hidden'
          })
          
          // 将关闭按钮添加到聊天窗口
          chatWindow.appendChild(closeBtn)
          
          // 确保关闭按钮始终可见
          const ensureCloseButtonVisible = setInterval(function() {
            if (chatWindow.style.display === 'none') {
              clearInterval(ensureCloseButtonVisible)
              return
            }
            
            if (!chatWindow.querySelector('.dify-close-btn')) {
              chatWindow.appendChild(closeBtn)
            }
          }, 1000)
        }
        
        // 监听页面变化，确保关闭按钮始终存在
        const pageObserver = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            if (mutation.type === 'childList') {
              const chatWindow = document.getElementById('dify-chatbot-bubble-window')
              if (chatWindow && chatWindow.style.display !== 'none') {
                setTimeout(() => {
                  addCloseButton(chatWindow)
                }, 200)
              }
            }
          })
        })
        
        pageObserver.observe(document.body, {
          childList: true,
          subtree: true
        })
      })
    </script>
    <script
      src="https://udify.app/embed.min.js"
      id="8kZ6czVlqIC5fIOQ"
      defer>
    </script>
    <style>
      /* Dify智能体样式 - 默认只显示小图标 */
      #dify-chatbot-bubble-button {
        background-color: #1C64F2 !important;
        z-index: 9999 !important;
        /* 调整位置，避免与页面内容重叠 */
        bottom: 2rem !important;
        right: 2rem !important;
        /* 确保小图标始终可见 */
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
      }
      
      #dify-chatbot-bubble-window {
        width: 18rem !important;
        height: 28rem !important;
        z-index: 9998 !important;
        /* 调整位置，避免与页面内容重叠 */
        bottom: 5rem !important;
        right: 2rem !important;
        /* 确保在小屏幕上也能正常显示 */
        max-width: calc(100vw - 4rem) !important;
        max-height: calc(100vh - 8rem) !important;
        /* 默认隐藏聊天窗口，只显示小图标 */
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        /* 确保聊天窗口不会影响主页面布局 */
        position: fixed !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        border-radius: 8px !important;
        /* 确保聊天窗口不会影响页面滚动 */
        overflow: hidden !important;
        /* 确保关闭按钮有足够空间 */
        padding-top: 10px !important;
      }
      
      /* 当聊天窗口打开时的样式 */
      #dify-chatbot-bubble-window[style*="display: block"],
      #dify-chatbot-bubble-window[style*="display:block"],
      #dify-chatbot-bubble-window.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
      }
      
      /* 确保Dify智能体在其他元素之上 */
      #dify-chatbot-bubble-button,
      #dify-chatbot-bubble-window {
        position: fixed !important;
      }
      
      /* 确保主页面布局不受Dify智能体影响 */
      body {
        /* 确保页面滚动正常 */
        overflow-x: hidden !important;
      }
      
      #app {
        /* 确保应用容器不受影响 */
        position: relative !important;
        z-index: 1 !important;
      }
      
      /* 响应式设计 - 小屏幕适配 */
      @media (max-width: 768px) {
        #dify-chatbot-bubble-window {
          width: calc(100vw - 2rem) !important;
          height: calc(100vh - 8rem) !important;
          bottom: 5rem !important;
          right: 1rem !important;
          left: 1rem !important;
        }
        
        #dify-chatbot-bubble-button {
          bottom: 1rem !important;
          right: 1rem !important;
        }
      }
      
      /* 在小屏幕上进一步调整 */
      @media (max-width: 480px) {
        #dify-chatbot-bubble-window {
          width: calc(100vw - 1rem) !important;
          height: calc(100vh - 6rem) !important;
          bottom: 4rem !important;
          right: 0.5rem !important;
          left: 0.5rem !important;
        }
        
        #dify-chatbot-bubble-button {
          bottom: 0.5rem !important;
          right: 0.5rem !important;
        }
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
